import React from "react";

export default class App extends React.Component {

    render(){

        const obj = {
            color: 'red',
            fontSize: 50, // 可以省略单位 px 不写
            border: '1px solid blue', // 在字符串中使用的时候也要加上 px
            height: 100,
            lineHeight: '100px' // 行高如果不设置单位会变成倍数
        }


        return (<>
            {/* 该写发是错误，不能直接设置 style 值为字符串 */}
            {/* <div style='color: red'>App 组件</div> */}

            {/* 该写法也是错误的，因为 {js表达式} */}
            {/* <div style={color: red}>App 组件</div> */}
            
            {/* 在 js 中一个对象可以通过 {} 来表示 */}
            {/* 这里 {{color: 'red'}} 不是双大括号语法 */}
            <div style={{color: 'red'}}>App 组件</div>

            <div style={obj}>你好世界</div>
        </>)
    }
}